<!-- 服务跟踪 -->
<template>
  <div class="app-container">
    <div class="cardBox">
      <leftTree
        ref="leftTree"
        :data="treeData"
        node-key="id"
        :default-props="defaultProps"
        search-key="customerName"
        width="200px"
        :default-expand-keys="defaultExpandKeys"
        :defalut-expand-all="true"
        @handleNodeClickAll="handleNodeClick"
      />
      <el-col
        id="right-content"
        class="right-content"
        style="height: 100%; padding-top: 0"
        :offset="0"
        :span="18"
      >
        <div class="search-and-button noLeftInput">
          <div class="btnList">
            <el-button
              type
              icon="el-icon-refresh-left"
              @click="$router.push('/reload')"
              >刷新</el-button
            >
            <el-button type icon="el-icon-more">更多</el-button>
            <el-button
              type="primary"
              plain
              :icon="!show ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
              @click="show = !show"
              >查询条件</el-button
            >
          </div>
        </div>
        <transition name="el-zoom-in-top">
          <div v-show="show" class="more-search">
            <el-form :model="search" label-width="80px">
              <el-row>
                <el-col :xs="24" :xl="8" :md="8">
                  <el-form-item label="时间" prop="beginDate">
                    <el-date-picker
                      v-model="search.time"
                      style="width: 100%"
                      type="daterange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期时间"
                      @change="getTableInfo()"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </transition>
        <el-row class="table">
          <el-table
            ref="tableData"
            v-loading="loading"
            :data="tableData"
            stripe
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column
              align="center"
              type="index"
              label="索引"
              width="60px"
            />
            <el-table-column
              v-for="item in fieldList"
              :key="item.id"
              :align="item.align || 'left'"
              :prop="item.code.split(':')[1]"
              :label="item.val == '访客姓名' ? '接待人' : item.val"
              :min-width="item.width + 'px'"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                <div v-if="item.code.split(':')[1] === 'score'">
                  <el-rate
                    v-model="row.score"
                    width="250px"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  />
                </div>
                <span v-else>{{ row[item.code.split(":")[1]] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              align="center"
              width="100px"
            >
              <template #default="{ row }">
                <el-button-group>
                  <el-button type="text" @click="showDialog(row)">
                    <i class="iconfont icon-search"></i>
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <div class="table-btn-box">
            <el-button
              @click="
                () => {
                  tableData.forEach((row) => {
                    $refs['tableData'].toggleRowSelection(row, true);
                  });
                }
              "
              >选择全部</el-button
            >
            <el-button
              @click="
                () => {
                  tableData.forEach((row) => {
                    $refs['tableData'].toggleRowSelection(row);
                  });
                }
              "
              >反向选择</el-button
            >
            <el-button>
              更多菜单
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </div>
          <pagination
            ref="Pagination"
            :total="total"
            :current.sync="search.current"
            :size.sync="search.size"
            @pagination="getTableInfo"
          />
        </el-row>
      </el-col>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import leftTree from "@/components/LeftTree";
import { mapGetters } from "vuex";
import { getCustomerListApi } from "@/api/public";

export default {
  components: {
    leftTree,
    Pagination,
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "customerName",
      },
      defaultExpandKeys: ["-1"],
      breadcrumb: ["客户目录"],
      loading: false,
      tableData: [],
      multipleSelection: [],
      total: 0,
      search: {
        current: 1,
        size: 20,
        keyword: "",
        treeStr: "-1",
        endDate: "",
        beginDate: "",
        time: [],
      },
      show: false,
    };
  },
  computed: {
    ...mapGetters(["compInfo"]),
  },
  created() {},
  mounted() {
    this.getTableInfo();
    this.getCustomerList();
  },
  methods: {
    /**
     * @description: page
     * @param {*} page
     * @return {*}
     */
    async getTableInfo(page = 1) {
      this.search.current = page;
      const { time } = this.search;
      if (time && time.length) {
        this.search.beginDate = time[0];
        this.search.endDate = time[1];
      } else {
        this.search.beginDate = "";
        this.search.endDate = "";
      }
      const search = {
        ...this.search,
      };
      delete search.time;
      this.loading = true;
      const res = await this.$axios.post("/crm/tracking/list", this.search);
      if (res?.data.code === 200) {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        setTimeout(() => {
          this.loading = false;
        }, 100);
      } else {
        this.loading = false;
      }
    },
    /**
     * @description: 查询所有客户
     * @return {*}
     */
    async getCustomerList() {
      const res = await getCustomerListApi();
      if (res?.data.code === 200) {
        this.treeData = [
          { id: "-1", customerName: "客户目录", children: res.data.data },
        ];
      }
    },
    /**
     * @description: 树节点点击
     * @param {*} data
     * @param {*} node
     * @return {*}
     */
    handleNodeClick({ data, node }) {
      this.breadcrumb = [];
      this.returnNodeLabel(node.parent);
      this.breadcrumb.push(data.customerName);
      this.search.treeStr =
        data.customerName === "客户目录" ? "-1" : data.customerName;
      // this.getTableInfo()
    },
    /**
     * @description: 递归获取名称
     * @param {*} node
     * @return {*}
     */
    returnNodeLabel(node) {
      if (node.parent) {
        this.breadcrumb.unshift(node.data.customerName);
        this.returnNodeLabel(node.parent);
      }
    },
    /**
     * @description: 选中项
     * @param {*} val
     * @return {*}
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style lang="scss" scoped></style>
